import { Box, Image } from '@chakra-ui/react';
import logoImage from 'assets/images/tourfly.png';
export default function Header() {
  return (
    <Box
      w="full"
      position="relative"
      h={{
        base: '70px',
        sm: '80px',
        md: '90px',
        lg: '100px',
        xl: '110px',
        '1080p': '120px',
        '2k': '130px',
      }}
    >
      <Image
        position="absolute"
        left="0"
        top="0"
        w="full"
        h="full"
        zIndex="0"
        src={`${import.meta.env.BASE_URL}banner.png`}
        objectFit="cover"
      />
      <Box
        // w="full"
        p="3"
        rounded="xl"
        bg="whiteAlpha.200"
        // bg="blackAlpha.200"
        backdropFilter="auto"
        backdropBlur="8px"
        position="absolute"
        top="2"
        left="2"
      >
        <Image src={logoImage} h="10" w="204px" />
      </Box>
    </Box>
  );
}
